 <script lang="ts" setup>
import { getOneByKey, updateWxAppConfig } from '../../api/wxAppConfig'
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import config from '../../config'
import { HttpStatusCode } from "axios";
import { ElMessage } from "element-plus"
import type { UploadProps } from 'element-plus'
const wxConfig = ref<ListWxAppConfig>({
  peerUseCoin: 0,
  maxBuyCount: 0,
  maxBuyCountLock: false,
  customerWxStr: '',
  customerWxPic: ''
})

onMounted(() => {
  initData(config.configKey)
})

const initData = async (configKey: string) => {
  const res = await getOneByKey(configKey)
  if(res.statusCode === HttpStatusCode.Ok) {
    wxConfig.value = res.data as ListWxAppConfig
  } else {
    ElMessage({
      type: 'error',
      message: '请求错误'
    })
  }
}
const submitData = async () => {
  const res = await updateWxAppConfig(wxConfig.value.id, wxConfig.value)
  if(res.statusCode === HttpStatusCode.Ok) {
    wxConfig.value = res.data as ListWxAppConfig
    imageUrl.value = ''
    ElMessage({
      type: 'success',
      message: '保存成功'
    })
  } else {
    ElMessage({
      type: 'error',
      message: '保存失败'
    })
  }
}

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  const { path } = response.data
  wxConfig.value.customerWxPic = path.replace(/\\/g, '/')
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
 </script>

 <template>
   <el-form
       label-position="top"
       label-width="100px"
       :model="wxConfig"
       style="max-width: 460px; margin: 20px"
   >
     <el-form-item label="同行车源积分">
       <el-input-number v-model="wxConfig.peerUseCoin">
       </el-input-number>
     </el-form-item>
     <el-form-item label="购买次数限制">
       <el-input-number v-model="wxConfig.maxBuyCount" :disabled="!wxConfig.maxBuyCountLock">
       </el-input-number>
     </el-form-item>
     <el-form-item label="是否开启购买次数限制">
       <el-switch v-model="wxConfig.maxBuyCountLock" />
     </el-form-item>
     <el-form-item label="客服微信号">
       <el-input v-model="wxConfig.customerWxStr" />
     </el-form-item>
     <el-form-item label="客服二维码">
       <el-upload
           class="avatar-uploader"
           :action="config.uploadUrl + '/api/upload/image'"
           :show-file-list="false"
           :on-success="handleAvatarSuccess"
       >
         <img v-if="imageUrl" :src="imageUrl" class="avatar"  alt=""/>
         <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
       </el-upload>
       <img v-if="wxConfig.customerWxPic" :src="config.baseUrl + '/' + wxConfig.customerWxPic" style="width: 178px; height: 178px;object-fit: contain; margin-left: 20px"  alt=""/>
     </el-form-item>
   </el-form>
   <el-button type="primary" @click="submitData" style="margin-left: 20px">保存配置</el-button>
 </template>

 <style lang="less" scoped>
 .avatar-uploader .avatar {
   width: 178px;
   height: 178px;
   display: block;
 }
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: 0.2s;
 }

 .avatar-uploader .el-upload:hover {
   border-color: #4b5cc4;
 }

 .el-icon.avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
   width: 178px;
   height: 178px;
   text-align: center;
 }
 </style>